<template>
  <bm-overlay pane="labelPane"
              :class="{sample: true}"
              @draw="draw"
              ref="customOverlay">
    <div class="sitIcon flex-r"
         @click.stop="$emit('tag')"
         @touchstart.stop="$emit('tag')">
      <div class="three"
           v-show="showInfo"></div>
      <div class="left ellipsis"
           v-show="showInfo">{{position.name}}</div>
      <div class="right"
           :class="{transform:!showInfo}"
           :style="{background:position.state!=='在线' ? '#8B8B8B' : areaConfig(type, position[type]).color,padding:(zoom===11 || zoom===12)?'6px':'0 12px'}">{{(zoom!==11 && zoom!==12)?position.state!=='在线'?'--':position[type]:''}}</div>
    </div>
  </bm-overlay>
</template>

<script>
import areaConfig from '../../common/js/range.js'
import { BmOverlay } from 'vue-baidu-map'
export default {
  props: ['position', 'zoom', 'type'],
  components: {
    BmOverlay
  },
  data () {
    return {
      showInfo: false
    }
  },
  methods: {
    areaConfig (type, num) {
      return areaConfig(type, num)
    },
    draw ({ el, BMap, map }) {
      const { lng, lat } = this.position
      const pixel = map.pointToOverlayPixel(new BMap.Point(lng, lat))
      el.style.left = pixel.x - 25 + 'px'
      el.style.top = pixel.y - 25 + 'px'
    }
  },
  watch: {
    position () {
      this.$refs.customOverlay.reload()
    },
    zoom (value) {
      this.$nextTick(() => {
        console.log(value)
        if (value >= 15 && value <= 19) {
          this.showInfo = true
        } else {
          this.showInfo = false
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.sample {
  position: absolute;
  width: 50px;
  height: 50px;
}
.sitIcon {
  position: absolute;
  left: -12px;
  top: -12px;
  border-radius: 0.08rem;
  .left {
    line-height: 36px;
    max-width: 180px;
    font-size: 12px;
    height: 36px;
    background: #405891;
    padding: 0 8px;
    color: white;
    z-index: 103;
    border-radius: 6px 0 0 6px;
    text-align: center;
  }
  .right {
    font-size: 16px;
    white-space: nowrap;
    font-weight: 600;
    text-align: center;
    line-height: 36px;
    padding: 0px 9px;
    background: #f0a25d;
    border-radius: 6px;
    color: white;
    transform: translateX(-4px);
    z-index: 102;
  }
  .transform {
    transform: translate(18px, 18px);
  }
  .three {
    position: absolute;
    width: 0.12rem;
    height: 0.12rem;
    bottom: -0.04rem;
    min-width: 10px;
    min-height: 10px;
    left: 30px;
    transform: rotate(-45deg);
    background: #405891;
    z-index: -1;
    border-radius: 0.02rem;
  }
}
</style>
